<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSE演示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #output {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            min-height: 100px;
            white-space: pre; /* 关键样式：保留所有空白和换行 */
        }
    </style>
</head>


<body>
<h1>SSE演示</h1>
<div id="output"></div>

<script>
    const outputDiv = document.getElementById('output');
    let eventSource;

    function connectSSE() {
        eventSource = new EventSource('http://127.0.0.1:8080/api/sse/');

        eventSource.onmessage = (event) => {
            outputDiv.innerHTML += event.data.replace(/ /g, '&nbsp;');
        };

        // 添加错误处理
        eventSource.onerror = () => {
            console.log('SSE error, reconnecting...');
            eventSource.close();
            // setTimeout(connectSSE, 1000); // 1秒后重连
        };
    }

    connectSSE();
</script>

</body>
</html>